วิธีการเพิ่มขนาดการอัปโหลดไฟล์ในเว็บไซต์ในสภาพแวดล้อม nginx + php-fpm

สำหรับผู้ที่ใช้งาน nginx + php-fpm ในการรันเว็บไซต์ แล้วเจอปัญหาเกี่ยวกับการอัปโหลดไฟล์โดยมี Error แจ้งเตือนว่า "413 Request Entity Too Large" แบบนี้ เราก็แค่เข้าไปเพิ่มขนาดไฟล์ให้เพียงพอต่อการอัปโหลดในสภาพแวดล้อมที่เรากำลังใช้งานอยู่ ซึ่งผมจะมาอธิบายวิธีการในบทความนี้ครับ

#Classmethod Thailand

#Thai Language

#AWS

#AWS-Thai

#Amazon EC2

Tinnakorn Maneewong

2022.08.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

POP จากบริษัท Classmethod (Thailand) ครับ

ครั้งนี้ผมจะมาแนะนำวิธีการเพิ่มขนาดการอัปโหลดไฟล์ในเว็บไซต์ในสภาพแวดล้อม nginx + php-fpm เพื่อให้สามารถอัปโหลดไฟล์ตามขนาดที่เราต้องการได้ครับ

สิ่งที่ต้องมี

1. EC2 Instance ที่ได้ทำการติดตั้ง PHP โดยใช้ Nginx และกำลังเชื่อมต่อกับ Server Amazon Linux 2 ด้วย PuTTY หรือ VSCode แล้ว (ตัวอย่างนี้ทางผู้เขียนได้ใช้ VSCode ในการเชื่อมต่อกับ Server Amazon Lunux 2)

ดูตัวอย่างการติดตั้ง PHP โดยใช้ Nginx ได้ที่ลิงก์บทความด้านล่างนี้

2. ไฟล์ที่ใช้ทดสอบการอัปโหลดขนาดไม่เกิน 2M และมากกว่า 8M (ขนาดไฟล์ตัวอย่างนี้คือ 3KB และ 25,735KB)

เป้าหมายในการทำ

ผมจะทำการเพิ่มขนาดการอัปโหลดไฟล์ให้กับเว็บไซต์ในNginxและPHPครับ

การสร้างไฟล์ form.php

รันคำสั่งด้านล่างนี้เพื่อสร้างไฟล์ form.php

vi form.php

จากนั้นกดปุ่มiให้ขึ้น-- INSERT --ด้านล่างซ้ายสุดและคัดลอก code ด้านล่างนี้วางลงไป
แล้วกดปุ่มEscตามด้วยพิมพ์:xเพื่อบันทึก

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <form action="upload.php" method="post" enctype="multipart/form-data">
        file: <br />
        <input type="file" name="upfile" size="30" /><br />
        <br />
        <input type="submit" value="Upload" />
      </form>
   </body>
</html>

การสร้างไฟล์ upload.php

รันคำสั่งด้านล่างนี้เพื่อสร้างไฟล์ upload.php

vi upload.php

จากนั้นทำการคัดลอก code ด้านล่างนี้ลงไปเหมือนกับขั้นตอนที่แล้ว และทำการ save ครับ

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p><?php

         if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
           echo "file size =" . $_FILES["upfile"]["size"];
         } else {
           echo "error";
         }

      ?></p>
   </body>
</html>

ทดสอบอัปโหลดไฟล์

ขั้นตอนนี้เราจะทำการทดสอบอัปโหลดไฟล์ขนาดไม่เกิน 2M และมากกว่า 8M
ในตัวอย่างนี้ผมจะใช้ไฟล์ขนาด 3KB และ 25,735KB ทำการทดสอบอัปโหลดครับ

เมื่อสร้างไฟล์ form.php กับ upload.php เสร็จแล้ว ให้เปิดหน้าเว็บไซต์โดยใช้ IP address ของ EC2 Instance ดังนี้

http://[ip-address-instance]/form.php

ถ้าเราทำตามขั้นตอนถูกต้องทุกอย่าง จะแสดงหน้าจอแบบนี้ครับ

อัปโหลดไฟล์ขนาดไม่เกิน 2M

ต่อไปผมจะทดสอบอัปโหลดไฟล์ขนาด3KB
ให้คลิกที่Choose Fileแล้วเลือกไฟล์ที่ไม่เกิน 2M และคลิกUpload

จะเห็นว่าแสดงเป็นfile size=3028หมายความว่าเราสามารถอัปโหลดไฟล์ได้
จากนั้นคลิก←กลับมาที่หน้าเดิมเพื่อเตรียมอัปโหลดไฟล์ในขั้นตอนถัดไป

อัปโหลดไฟล์ขนาดมากกว่า 8M

ต่อไปผมจะทดสอบอัปโหลดไฟล์ขนาด25,735KB
ให้คลิกที่Choose Fileแล้วเลือกไฟล์ที่มากกว่า 8M และคลิกUpload

จะเห็นว่าเกิด Error เนื่องจากไฟล์มีขนาดใหญ่กว่าที่ค่าเริ่มต้นของระบบ nginx ได้กำหนดไว้นั่นเอง
เราสามารถเข้าไปตั้งค่าเพิ่มขนาดการอัปโหลดไฟล์ด้วยตัวเองได้ง่ายๆในขั้นตอนถัดไปครับ

เพิ่มขนาดการอัปโหลดไฟล์ใน Nginx

การสาธิตนี้ผมจะทำการเพิ่มขนาดการอัปโหลดไฟล์ให้กับ Nginx ให้เป็น 30M

รันคำสั่งด้านล่างนี้เพื่อเข้าไปที่ไฟล์ nginx.conf

vi /etc/nginx/nginx.conf

แล้วคัดลอก code ด้านล่างนี้วางลงในส่วนของ server แล้วทำการ save

client_max_body_size 30M;
client_body_buffer_size 30M;

Output (example)

TERMINAL (VSCode)

"...ไม่ได้แสดง code ส่วนบน..."

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /var/www/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }

        client_max_body_size 30M;
        client_body_buffer_size 30M;
    }

"...ไม่ได้แสดง code ส่วนล่าง..."

แล้วรันคำสั่งนี้เพื่อ restart nginx

systemctl restart nginx

จากนั้นลองเปิดหน้าเว็บไซต์ที่อัปโหลดไฟล์อีกครั้ง และอัปโหลดไฟล์ที่มีขนาดมากกว่า 8M

จะเห็นว่าเปลี่ยนเป็น Error ตามเงื่อนไขที่เขียนไว้ในไฟล์ upload เนื่องจากว่าการตั้งค่ายังไม่เสร็จสมบูรณ์ ให้ทำการตั้งค่าเพิ่มเติมในขั้นตอนถัดไป

ต่อไปรันคำสั่งนี้เพื่อเข้าไปที่ไฟล์ php.ini

vi /etc/php.ini

แล้วค้นหาชื่อตามด้านล่างนี้เพื่อเปลี่ยนการตั้งค่าให้เป็น 30M ดังนี้
» พิมพ์/upload_max_filesize+ Enter แบบนี้แล้วกดปุ่มiแล้วเปลี่ยนให้เป็น 30M และกดปุ่มEsc
» พิมพ์/post_max_size+ Enter แล้วกดปุ่มiแล้วเปลี่ยนให้เป็น 30M เมื่อเสร็จแล้วทำการ save ได้เลย

upload_max_filesize = 30M
post_max_size = 30M

upload_max_filesize

post_max_size

แล้วรันคำสั่งนี้เพื่อ restart php-fpm

systemctl restart php-fpm

จะเห็นว่าสามารถอัปโหลดไฟล์ขนาดที่ต้องการได้แล้วครับ

สรุป

ผมได้มีโอกาสทำงานเกี่ยวกับการเขียนโปรแกรมมาบ้าง และตอนเขียนโปรแกรมเกี่ยวกับการอัปโหลดไฟล์จะเจอปัญหานี้บ่อย จึงได้นำมาเขียนลงในบทความนี้ให้กับผู้อ่านที่เจอปัญหาเดียวกับผมครับ

ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ

POP จากบริษัท Classmethod (Thailand) ครับ !